<template>
    <div class="platformsAdd">
        <div class="platformsAdd-list" v-for="(item,index) in list" :key="index">
            <div class="platformsAdd-list-img"><img :src="item.img"></img></div>
            <div class="platformsAdd-list-common">
                <div>{{item.name}}</div>
                <div>{{item.text}}</div>
            </div>
            <div class="platformsAdd-list-add">
                <a-button type="primary" :disabled="!item.show" @click="add(item)">
                    {{$ti18('rxList.newBtn','添加')}}
                </a-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {Util} from "@lowcode/jpaas-common-lib";
    import PlatformsEdit from './PlatformsEdit'

    export default {
        name: "platformsAdd",
        components: {
            PlatformsEdit
        },
        props: {
            //必须
            layerid: {
                type: String
            },
            //必须写
            destroy: {
                type: Function
            },
            //主键
            platformId: {
                type: String
            },
            platforms: {
                type: Array
            },
        },
        data() {
            return {
                list: [
                    {
                        name: this.i18n('form.WeChatGzh','微信公众号'),
                        id: 'WeChatGzh',
                        text: this.i18n('form.weGzhText','微信公众号Text'),
                        img: require('@/image/gzh.png'),
                        show: true
                    },
                    {
                        name: this.i18n('form.weCom','企业微信'),
                        id: 'WeChat',
                        text: this.i18n('form.weComText','企业微信text'),
                        img: require('@/image/qiye.png'),
                        show: true
                    }, {
                        name: this.i18n('form.dingTalk','钉钉'),
                        id: 'dingding',
                        text: this.i18n('form.dingTalkText','钉钉text'),
                        img: require('@/image/dingding.png'),
                        show: true
                    }, {
                        name: this.i18n('form.lark','飞书'),
                        id: 'feishu',
                        text: this.i18n('form.larkText','飞书text'),
                        img: require('@/image/feishu.png'),
                        show: true
                    }
                ]
            }
        },
        created() {
            this.setShow();
        },
        methods: {
            i18n(name,text,key){
                return this.$ti18(name,text,"platForms",key);
            },
            setShow() {
                for (var i = 0; i < this.platforms.length; i++) {
                    this.updataList(this.platforms[i].type)
                }
            },
            updataList(type) {
                for (var i = 0; i < this.list.length; i++) {
                    if (type == this.list[i].id) {
                        this.list[i].show = false;
                        return;
                    }
                }
            },
            add(item) {
                var self_ = this;
                Util.open({
                    component: PlatformsEdit,
                    curVm: this,
                    title: this.$ti18('rxList.newBtn','新增') + '-' + item.name,
                    max: true,
                    data: {
                        typeId: item.id,
                        platforms: this.platforms
                    }
                }, function (action, data) {
                    if (action != 'ok') {
                        return;
                    }
                    self_.updataList(item.id);
                    self_.$parent.changeData(item.id, data);
                });
            }
        }
    }
</script>

<style scoped>
    .platformsAdd {
        width: 100%;
    }

    .platformsAdd-list {
        width: 100%;
        display: flex;
        height: 95px;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
    }

    .platformsAdd-list-common {
        flex: 1;
    }

    .platformsAdd-list-img {
        margin-left: 24px;
        margin-right: 10px;
    }

    .platformsAdd-list-add {
        margin-right: 24px;
    }

    .platformsAdd-list-common div:nth-child(1) {
        font-size: 14px;
        color: #333333;
        font-weight: bold;
    }

    .platformsAdd-list-common div:nth-child(2) {
        font-size: 12px;
        color: #000000;
        opacity: 0.65;
    }
</style>